content: () -> [Content]) {
-
- self.content = content()
- self.classes = ["stack-column", size.rawValue, alignment.rawValue, offset.rawValue]
+ public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> ZStack {
+ return mutate(frame: width.rawValue, offset: offset?.rawValue)
}
- /// Creates a stack column.
- internal init(content: [Content], classes: [String]) {
-
- self.content = content
- self.classes = classes
- }
-
- public var body: Content {
- Division {
- content
- }
- .class(classes.joined(separator: " "))
+ public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> ZStack {
+ return self.mutate(margin: length.rawValue, insets: insets)
}
}
+
diff --git a/Sources/HTMLKitComponents/Components/Symbol.swift b/Sources/HTMLKitComponents/Components/Symbol.swift
index 31f5b84d..ca6ed029 100644
--- a/Sources/HTMLKitComponents/Components/Symbol.swift
+++ b/Sources/HTMLKitComponents/Components/Symbol.swift
@@ -57,7 +57,7 @@ public struct Symbol: View, Modifiable {
public func fontSize(_ size: Tokens.FontSize) -> Symbol {
var newSelf = self
- newSelf.classes.append(size.rawValue)
+ newSelf.classes.append("size:\(size.rawValue)")
return newSelf
}
@@ -65,7 +65,7 @@ public struct Symbol: View, Modifiable {
public func foregroundColor(_ color: Tokens.ForegroundColor) -> Symbol {
var newSelf = self
- newSelf.classes.append(color.rawValue)
+ newSelf.classes.append("color:\(color.rawValue)")
return newSelf
}
diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift
index a3293e03..661b74e0 100644
--- a/Sources/HTMLKitComponents/Components/Text.swift
+++ b/Sources/HTMLKitComponents/Components/Text.swift
@@ -107,14 +107,114 @@ extension Text: TextModifier {
}
public func bold() -> Text {
- return self.mutate(bold: Tokens.FontWeight.bold.rawValue)
+ return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue)
+ }
+
+ public func bold(_ condition: Bool) -> Text {
+
+ if condition {
+ return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue)
+ }
+
+ return self
}
public func italic() -> Text {
- return self.mutate(italic: Tokens.FontStyle.italic.rawValue)
+ return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue)
+ }
+
+ public func italic(_ condition: Bool) -> Text {
+
+ if condition {
+ return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue)
+ }
+
+ return self
}
public func underline() -> Text {
- return self.mutate(underline: Tokens.TextDecoration.underline.rawValue)
+ return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue)
+ }
+
+ public func underline(_ condition: Bool) -> Text {
+
+ if condition {
+ return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue)
+ }
+
+ return self
+ }
+
+ public func strikethrough() -> Text {
+ return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue)
+ }
+
+ public func strikethrough(_ condition: Bool) -> Text {
+
+ if condition {
+ return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue)
+ }
+
+ return self
+ }
+
+ public func lineSpacing(_ height: Tokens.LineHeight) -> Text {
+ return self.mutate(lineheight: height.rawValue)
+ }
+
+ public func lineLimit(_ limit: Tokens.LineLimit) -> Text {
+ return self.mutate(linelimit: limit.rawValue)
+ }
+}
+
+extension Text: ViewModifier {
+
+ public func backgroundColor(_ color: Tokens.BackgroundColor) -> Text {
+ return self.mutate(backgroundcolor: color.rawValue)
+ }
+
+ public func opacity(_ value: Tokens.OpacityValue) -> Text {
+ return self.mutate(opacity: value.rawValue)
+ }
+
+ public func zIndex(_ index: Tokens.PositionIndex) -> Text {
+ return self.mutate(zindex: index.rawValue)
+ }
+
+ public func hidden() -> Text {
+ return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue)
+ }
+
+ public func hidden(_ condition: Bool) -> Text {
+
+ if condition {
+ return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue)
+ }
+
+ return self
+ }
+
+ public func colorScheme(_ scheme: Tokens.ColorScheme) -> Text {
+ return self.mutate(scheme: scheme.rawValue)
+ }
+
+ public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Text {
+ return self.mutate(padding: length.rawValue, insets: insets)
+ }
+
+ public func borderShape(_ shape: Tokens.BorderShape) -> Text {
+ return self.mutate(bordershape: shape.rawValue)
+ }
+
+ public func borderColor(_ color: Tokens.BorderColor) -> Text {
+ return self.mutate(bordercolor: color.rawValue)
+ }
+
+ public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Text {
+ return mutate(frame: width.rawValue, offset: offset?.rawValue)
+ }
+
+ public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Text {
+ return self.mutate(margin: length.rawValue, insets: insets)
}
}
diff --git a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift
index 5197af9b..22cc4621 100644
--- a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift
+++ b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift
@@ -12,21 +12,24 @@ public protocol ButtonModifier {
/// Sets the style of the button.
func buttonStyle(_ style: Tokens.ButtonStyle) -> Self
+ /// Sets the state of the view.
+ func disabled() -> Self
+
/// Sets the state of the view.
func disabled(_ condition: Bool) -> Self
}
extension ButtonModifier where Self: Modifiable {
- internal func mutate(buttonsize class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(buttonsize value: String) -> Self {
+ return self.mutate(class: "size:\(value)")
}
- internal func mutate(buttonstyle class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(buttonstyle value: String) -> Self {
+ return self.mutate(class: "style:\(value)")
}
- internal func mutate(buttonstate class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(buttonstate value: String) -> Self {
+ return self.mutate(class: "state:\(value)")
}
}
diff --git a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift
index 7e529eef..f669be8d 100644
--- a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift
+++ b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift
@@ -7,26 +7,40 @@
public protocol ImageModifier {
/// Sets how the content should be resized to fit its parent.
- func objectFit(_ fit: Tokens.ObjectFit) -> Self
+ func aspectRatio(_ ratio: Tokens.AspectRatio, fit: Tokens.ObjectFit) -> Self
/// Sets the scale of the image.
func imageScale(_ scale: Tokens.ImageScale) -> Self
/// Sets the fill style to use.
func clipShape(_ shape: Tokens.ClipShape) -> Self
+
+ func scaleToFit() -> Self
+
+ func scaleToFill() -> Self
}
extension ImageModifier where Self: Modifiable {
- internal func mutate(objectfit class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(objectfit value: String) -> Self {
+ return self.mutate(class: "fit:\(value)")
+ }
+
+ internal func mutate(imagescale value: String) -> Self {
+ return self.mutate(class: "scale:\(value)")
}
- internal func mutate(imagescale class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(clipshape value: String) -> Self {
+ return self.mutate(class: "shape:\(value)")
}
- internal func mutate(clipshape class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(aspectratio ratio: String, fit: String) -> Self {
+
+ var classes: [String] = []
+
+ classes.append("aspect:\(ratio)")
+ classes.append("fit:\(fit)")
+
+ return self.mutate(classes: classes)
}
}
diff --git a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift
index 7da42597..ac73f406 100644
--- a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift
+++ b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift
@@ -15,12 +15,12 @@ public protocol InputModifier {
extension InputModifier where Self: Modifiable {
- internal func mutate(inputstate class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(inputstate value: String) -> Self {
+ return self.mutate(class: "state:\(value)")
}
- internal func mutate(focuscolor class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(focuscolor value: String) -> Self {
+ return self.mutate(class: "focus:\(value)")
}
}
diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift
index 33a69a94..07da7563 100644
--- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift
+++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift
@@ -27,48 +27,65 @@ public protocol TextModifier {
/// Applies a bold font weight to the text.
func bold() -> Self
+ func bold(_ condition: Bool) -> Self
+
/// Applies italics to the text.
func italic() -> Self
+ func italic(_ condition: Bool) -> Self
+
/// Applies an underline to the text.
func underline() -> Self
+
+ func underline(_ condition: Bool) -> Self
+
+ /// Applies an strikethrough to the text.
+ func strikethrough() -> Self
+
+ func strikethrough(_ condition: Bool) -> Self
+
+ /// Sets the line height for the text.
+ func lineSpacing(_ height: Tokens.LineHeight) -> Self
+
+ /// Sets the limit of the lines for the text.
+ func lineLimit(_ limit: Tokens.LineLimit) -> Self
}
extension TextModifier where Self: Modifiable {
- internal func mutate(font class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(font value: String) -> Self {
+ return self.mutate(class: "style:\(value)")
}
- internal func mutate(foregroundcolor class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(foregroundcolor value: String) -> Self {
+ return self.mutate(class: "color:\(value)")
}
- internal func mutate(fontsize class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(fontsize value: String) -> Self {
+ return self.mutate(class: "size:\(value)")
}
- internal func mutate(fontweight class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(fontweight value: String) -> Self {
+ return self.mutate(class: "weight:\(value)")
}
- internal func mutate(fonttransformation class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(fonttransformation value: String) -> Self {
+ return self.mutate(class: "transformation:\(value)")
}
- internal func mutate(fontstyle class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(fontstyle value: String) -> Self {
+ return self.mutate(class: "style:\(value)")
}
- internal func mutate(bold class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(fontdecoration value: String) -> Self {
+ return self.mutate(class: "decoration:\(value)")
}
- internal func mutate(italic class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(lineheight value: String) -> Self {
+ return self.mutate(class: "height:\(value)")
}
- internal func mutate(underline class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(linelimit value: String) -> Self {
+ return self.mutate(class: "limit:\(value)")
}
}
diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift
index 00ec1363..19fd6cad 100644
--- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift
+++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift
@@ -18,50 +18,144 @@ public protocol ViewModifier {
/// Hides the view
func hidden() -> Self
+ func hidden(_ condition: Bool) -> Self
+
/// Sets the color appearence
func colorScheme(_ scheme: Tokens.ColorScheme) -> Self
- /// Sets the box padding
- func padding(_ length: Tokens.BoxPadding) -> Self
+ /// Sets the padding for the vertical box.
+ func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> Self
/// Sets the shape of the button.
func borderShape(_ shape: Tokens.BorderShape) -> Self
/// Sets the border color of the input
func borderColor(_ color: Tokens.BorderColor) -> Self
+
+ func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset?) -> Self
+
+ /// Sets the padding for the vertical box.
+ func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Self
}
extension ViewModifier where Self: Modifiable {
- internal func mutate(opacity class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(opacity value: String) -> Self {
+ return self.mutate(class: "opacity\(value)")
+ }
+
+ internal func mutate(zindex value: String) -> Self {
+ return self.mutate(class: "zindex:\(value)")
+ }
+
+ internal func mutate(backgroundcolor value: String) -> Self {
+ return self.mutate(class: "background:\(value)")
+ }
+
+ internal func mutate(viewstate value: String) -> Self {
+ return self.mutate(class: "state:\(value)")
}
- internal func mutate(zindex class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(scheme value: String) -> Self {
+ return self.mutate(class: "scheme:\(value)")
}
- internal func mutate(backgroundcolor class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(padding value: String) -> Self {
+ return self.mutate(class: "padding:\(value)")
}
- internal func mutate(viewstate class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(padding value: String, insets: EdgeSet) -> Self {
+
+ var classes: [String] = []
+
+ if !insets.contains(.all) {
+
+ if insets.contains(.top) {
+ classes.append("padding-top:\(value)")
+ }
+
+ if insets.contains(.bottom) {
+ classes.append("padding-bottom:\(value)")
+ }
+
+ if insets.contains(.leading) {
+ classes.append("padding-leading:\(value)")
+ }
+
+ if insets.contains(.trailing) {
+ classes.append("padding-trailing:\(value)")
+ }
+
+ if insets.contains(.horizontal) {
+ classes.append("padding-inline:\(value)")
+ }
+
+ if insets.contains(.vertical) {
+ classes.append("padding-block:\(value)")
+ }
+
+ } else {
+ classes.append("padding:\(value)")
+ }
+
+ return self.mutate(classes: classes)
}
- internal func mutate(scheme class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(bordershape value: String) -> Self {
+ return self.mutate(class: "shape:\(value)")
}
- internal func mutate(padding class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(bordercolor value: String) -> Self {
+ return self.mutate(class: "border:\(value)")
}
- internal func mutate(bordershape class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(frame width: String, offset: String? = nil) -> Self {
+
+ var classes: [String] = []
+
+ if let offset {
+ classes.append("offset:\(offset)")
+ }
+
+ classes.append("size:\(width)")
+
+ return self.mutate(classes: classes)
}
- internal func mutate(bordercolor class: String) -> Self {
- return self.mutate(class: `class`)
+ internal func mutate(margin value: String, insets: EdgeSet) -> Self {
+
+ var classes: [String] = []
+
+ if !insets.contains(.all) {
+
+ if insets.contains(.top) {
+ classes.append("margin-top:\(value)")
+ }
+
+ if insets.contains(.bottom) {
+ classes.append("margin-bottom:\(value)")
+ }
+
+ if insets.contains(.leading) {
+ classes.append("margin-leading:\(value)")
+ }
+
+ if insets.contains(.trailing) {
+ classes.append("margin-trailing:\(value)")
+ }
+
+ if insets.contains(.horizontal) {
+ classes.append("margin-inline:\(value)")
+ }
+
+ if insets.contains(.vertical) {
+ classes.append("margin-block:\(value)")
+ }
+
+ } else {
+ classes.append("margin:\(value)")
+ }
+
+ return self.mutate(classes: classes)
}
}
diff --git a/Sources/HTMLKitComponents/Options.swift b/Sources/HTMLKitComponents/Options.swift
new file mode 100644
index 00000000..bd1cc521
--- /dev/null
+++ b/Sources/HTMLKitComponents/Options.swift
@@ -0,0 +1,22 @@
+/*
+ Abstract:
+ The file contains the option sets.
+ */
+
+public struct EdgeSet: OptionSet {
+
+ public var rawValue: Int
+
+ public static let top = EdgeSet(rawValue: 1 << 0)
+ public static let bottom = EdgeSet(rawValue: 1 << 1)
+ public static let leading = EdgeSet(rawValue: 1 << 2)
+ public static let trailing = EdgeSet(rawValue: 2 << 3)
+ public static let horizontal = EdgeSet(rawValue: 3 << 4)
+ public static let vertical = EdgeSet(rawValue: 4 << 5)
+
+ public static let all: EdgeSet = [.top, .bottom, .leading, .trailing]
+
+ public init(rawValue: Int) {
+ self.rawValue = rawValue
+ }
+}
diff --git a/Sources/HTMLKitComponents/Properties/Modifiable.swift b/Sources/HTMLKitComponents/Properties/Modifiable.swift
index 5e60e812..67d57fc3 100644
--- a/Sources/HTMLKitComponents/Properties/Modifiable.swift
+++ b/Sources/HTMLKitComponents/Properties/Modifiable.swift
@@ -15,4 +15,12 @@ extension Modifiable {
return newSelf
}
+
+ internal func mutate(classes: [String]) -> Self {
+
+ var newSelf = self
+ newSelf.classes.append(contentsOf: classes)
+
+ return newSelf
+ }
}
diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css
index 72369f61..79c465b7 100644
--- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css
+++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css
@@ -20,8 +20,10 @@
*/
.button {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--inlineSize: fit-content();
--fontSize: 1.0rem;
--fontWeight: 400;
@@ -29,15 +31,19 @@
--borderWidth: 1px;
--borderColor: 210, 9%, 31%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--foregroundColor: 0, 0%, 100%;
--backgroundColor: 210, 11%, 15%;
+ --backgroundOpacity: 1.0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
inline-size: var(--inlineSize);
font-family: var(--fontFamily);
font-size: var(--fontSize);
@@ -48,8 +54,9 @@
white-space: nowrap;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
- background-color: hsla(var(--backgroundColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
+ border-radius: var(--borderRadius);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@@ -74,7 +81,7 @@
.button.style\:outline {
--foregroundColor: var(--secondaryColor);
- --backgroundColor: transparent;
+ --backgroundOpacity: 0.0;
--borderColor: var(--secondaryColor);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css
index 88e28ed9..a618cecd 100644
--- a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css
+++ b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css
@@ -20,8 +20,10 @@
*/
.dropdown {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--inlineSize: fit-content();
--fontSize: 1.0rem;
--fontWeight: 400;
@@ -29,8 +31,10 @@
--borderWidth: 1px;
--borderColor: 210, 9%, 31%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--foregroundColor: 0, 0%, 100%;
--backgroundColor: 210, 11%, 15%;
+ --backgroundOpacity: 1.0;
position: relative;
}
@@ -39,8 +43,10 @@
display: flex;
align-items: center;
justify-content: center;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
inline-size: var(--inlineSize);
font-family: var(--fontFamily);
font-size: var(--fontSize);
@@ -51,9 +57,9 @@
white-space: nowrap;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@@ -68,7 +74,8 @@
position: absolute;
z-index: 1;
display: none;
- margin-block: 0.75rem;
+ margin-block: 0.5rem;
+ padding-block: 0.5rem;
inline-size: calc(var(--inlineSize) * 1.5);
border-width: var(--borderWidth);
border-style: solid;
@@ -83,8 +90,11 @@
background-color: hsla(var(--primaryColor), 1.0);
}
-.dropdown .list .list-row .link {
- display: block;
+.dropdown-content > .list > .list-row > .link {
+ display: flex;
+ align-items: center;
+ padding-block: 0.5rem;
+ padding-inline: 1.0rem;
}
.dropdown.size\:full {
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css
index 8cd17473..9f4bf7c6 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css
@@ -14,9 +14,11 @@
.checkfield {
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
+ --borderOpacity: 1.0;
--controlColor: 0, 0%, 0%;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
position: relative;
display: inline-grid;
@@ -27,15 +29,16 @@
inline-size: 1.5rem;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
- background-color: hsla(var(--backgroundColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.checkfield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css
index e4958f60..75654d22 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css
@@ -22,8 +22,10 @@
*/
.datepicker {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: normal;
--lineHeight: 1.5;
@@ -31,8 +33,10 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
position: relative;
}
@@ -40,24 +44,27 @@
.datepicker-datefield {
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.datepicker-datefield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
@@ -67,7 +74,7 @@
}
.datepicker-datefield:invalid {
- border-color: var(--redColor);
+ --borderColor: var(--redColor);
}
.datepicker-calendar {
@@ -91,8 +98,10 @@
display: flex;
align-items : center;
justify-content: space-between;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
list-style-type: none;
}
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css
index b664c243..3e92fa73 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css
@@ -16,9 +16,11 @@
.radioselect {
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
+ --borderOpacity: 1.0;
--controlColor: 0, 0%, 0%;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
position: relative;
display: inline-grid;
@@ -29,16 +31,17 @@
inline-size: 1.5rem;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: 50%;
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.radioselect:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css
index f4114eae..283ecbd5 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css
@@ -22,8 +22,10 @@
*/
.searchfield {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
@@ -31,35 +33,40 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.searchfield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
.searchfield:invalid {
- border-color: var(--redColor);
+ --borderColor: var(--redColor);
}
.scheme\:dark .searchfield, .searchfield.scheme\:dark {
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css
index b5294957..f9e80ca0 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css
@@ -22,8 +22,10 @@
*/
.securefield {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: normal;
--lineHeight: 1.5;
@@ -31,29 +33,34 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.securefield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css
index 985d9fbc..6b773d5f 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css
@@ -22,8 +22,10 @@
*/
.selectfield {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
@@ -31,8 +33,10 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
position: relative;
}
@@ -40,30 +44,33 @@
.selectfield-textfield {
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectfield-textfield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
.selectfield-textfield:invalid {
- border-color: var(--redColor);
+ --borderColor: var(--redColor);
}
.selectfield-optionlist {
@@ -81,8 +88,10 @@
.option {
display: block;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-family: system-ui;
font-size: var(--fontSize);
font-weight: var(--fontWeight);
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css
index 5084707e..e82019f3 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css
@@ -16,9 +16,11 @@
.slider {
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
+ --borderOpacity: 1.0;
--controlColor: 0, 0%, 0%;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: block;
margin: 0;
@@ -26,15 +28,16 @@
inline-size: 100%;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
- background-color: hsla(var(--backgroundColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.slider:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css
index 90fd37d9..fc3cbc64 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css
@@ -22,8 +22,10 @@
*/
.texteditor {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
@@ -31,22 +33,26 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -54,13 +60,14 @@
}
.texteditor:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
.texteditor:invalid {
- border-color: var(--redColor);
+ --borderColor: var(--redColor);
}
.scheme\:dark .texteditor, .texteditor.scheme\:dark {
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css
index ac435e5c..d690136d 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css
@@ -22,8 +22,10 @@
*/
.textfield {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
@@ -31,35 +33,40 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
color: hsla(var(--foregroundColor), 1.0);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.textfield:focus {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
.textfield:invalid {
- border-color: var(--redColor);
+ --borderColor: var(--redColor);
}
.scheme\:dark .textfield, .textfield.scheme\:dark {
diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css
index 28f7f1f5..a5847c14 100644
--- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css
+++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css
@@ -22,8 +22,10 @@
*/
.textpad {
- --paddingBlock: 0.5rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
@@ -31,31 +33,40 @@
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--focusColor: 210, 100%, 50%;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
display: flex;
flex-direction: column;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
}
.textpad:focus-within {
- border-color: hsla(var(--focusColor), 1.0);
+ --borderColor: var(--focusColor) !important;
+
outline: 0;
box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1);
}
+.textpad:has(.textpad-content:invalid) {
+ --borderColor: var(--redColor);
+}
+
.textpad-toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
list-style: none;
}
@@ -73,8 +84,10 @@
.textpad-content {
display: block;
inline-size: 100%;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
font-size: var(--fontSize);
font-weight: var(--fontWeight);
line-height: var(--lineHeight);
diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css
index 73f10253..cd219bdc 100644
--- a/Sources/HTMLKitComponents/Resources/css/globals.css
+++ b/Sources/HTMLKitComponents/Resources/css/globals.css
@@ -222,10 +222,6 @@ video {
--foregroundColor: var(--brownColor) !important;
}
-.color\:transparent {
- --foregroundColor: transparent !important;
-}
-
.color\:cyan {
--foregroundColor: var(--cyanColor) !important;
}
@@ -379,6 +375,10 @@ video {
--borderColor: var(--secondaryColor) !important;
}
+.border\:transparent {
+ --borderOpacity: 0.0;
+}
+
/*
backgrounds
*/
@@ -455,6 +455,10 @@ video {
--backgroundColor: var(--secondaryColor) !important;
}
+.background\:transparent {
+ --backgroundOpacity: 0.0;
+}
+
/*
focus
*/
@@ -536,18 +540,199 @@ video {
*/
.padding\:large {
- --paddingInline: 2.25rem !important;
- --paddingBlock: 2.25rem !important;
+ --paddingInlineStart: 2.25rem !important;
+ --paddingInlineEnd: 2.25rem !important;
+ --paddingBlockStart: 2.25rem !important;
+ --paddingBlockEnd: 2.25rem !important;
}
.padding\:medium {
- --paddingInline: 1.5rem !important;
- --paddingBlock: 1.5rem !important;
+ --paddingInlineStart: 1.5rem !important;
+ --paddingInlineEnd: 1.5rem !important;
+ --paddingBlockStart: 1.5rem !important;
+ --paddingBlockEnd: 1.5rem !important;
}
.padding\:small {
- --paddingInline: 1rem !important;
- --paddingBlock: 1rem !important;
+ --paddingInlineStart: 1rem !important;
+ --paddingInlineEnd: 1rem !important;
+ --paddingBlockStart: 1rem !important;
+ --paddingBlockEnd: 1rem !important;
+}
+
+.padding-inline\:large {
+ --paddingInlineStart: 2.25rem !important;
+ --paddingInlineEnd: 2.25rem !important;
+}
+
+.padding-inline\:medium {
+ --paddingInlineStart: 1.5rem !important;
+ --paddingInlineEnd: 1.5rem !important;
+}
+
+.padding-inline\:small {
+ --paddingInlineStart: 1rem !important;
+ --paddingInlineEnd: 1rem !important;
+}
+
+.padding-block\:large {
+ --paddingBlockStart: 2.25rem !important;
+ --paddingBlockEnd: 2.25rem !important;
+}
+
+.padding-block\:medium {
+ --paddingBlockStart: 1.5rem !important;
+ --paddingBlockEnd: 1.5rem !important;
+}
+
+.padding-block\:small {
+ --paddingBlockStart: 1rem !important;
+ --paddingBlockEnd: 1rem !important;
+}
+
+.padding-top\:large {
+ --paddingBlockStart: 2.25rem !important;
+}
+
+.padding-top\:medium {
+ --paddingBlockStart: 1.5rem !important;
+}
+
+.padding-top\:small {
+ --paddingBlockStart: 1rem !important;
+}
+
+.padding-bottom\:large {
+ --paddingBlockEnd: 2.25rem !important;
+}
+
+.padding-bottom\:medium {
+ --paddingBlockEnd: 1.5rem !important;
+}
+
+.padding-bottom\:small {
+ --paddingBlockEnd: 1rem !important;
+}
+
+.padding-leading\:large {
+ --paddingInlineStart: 2.25rem !important;
+}
+
+.padding-leading\:medium {
+ --paddingInlineStart: 1.5rem !important;
+}
+
+.padding-leading\:small {
+ --paddingInlineStart: 1rem !important;
+}
+
+.padding-trailing\:large {
+ --paddingInlineEnd: 2.25rem !important;
+}
+
+.padding-trailing\:medium {
+ --paddingInlineEnd: 1.5rem !important;
+}
+
+.padding-trailing\:small {
+ --paddingInlineEnd: 1rem !important;
+}
+
+/*
+ margin
+ */
+
+.margin\:large {
+ margin-inline: 2.25rem !important;
+ margin-block: 2.25rem !important;
+}
+
+.margin\:medium {
+ margin-inline: 1.5rem !important;
+ margin-block: 1.5rem !important;
+}
+
+.margin\:small {
+ margin-inline: 1rem !important;
+ margin-block: 1rem !important;
+}
+
+.margin-inline\:large {
+ margin-inline-start: 2.25rem !important;
+ margin-inline-end: 2.25rem !important;
+}
+
+.margin-inline\:medium {
+ margin-inline-start: 1.5rem !important;
+ margin-inline-end: 1.5rem !important;
+}
+
+.margin-inline\:small {
+ margin-inline-start: 1rem !important;
+ margin-inline-end: 1rem !important;
+}
+
+.margin-block\:large {
+ margin-block-start: 2.25rem !important;
+ margin-block-end: 2.25rem !important;
+}
+
+.margin-block\:medium {
+ margin-block-start: 1.5rem !important;
+ margin-block-end: 1.5rem !important;
+}
+
+.margin-block\:small {
+ margin-block-start: 1rem !important;
+ margin-block-end: 1rem !important;
+}
+
+.margin-top\:large {
+ margin-block-start: 2.25rem !important;
+}
+
+.margin-top\:medium {
+ margin-block-start: 1.5rem !important;
+}
+
+.margin-top\:small {
+ margin-block-start: 1rem !important;
+}
+
+.margin-bottom\:large {
+ margin-block-end: 2.25rem !important;
+}
+
+.margin-bottom\:medium {
+ margin-block-end: 1.5rem !important;
+}
+
+.margin-bottom\:small {
+ margin-block-end: 1rem !important;
+}
+
+.margin-leading\:large {
+ margin-inline-start: 2.25rem !important;
+}
+
+.margin-leading\:medium {
+ margin-inline-start: 1.5rem !important;
+}
+
+.margin-leading\:small {
+ margin-inline-start: 1rem !important;
+}
+
+.margin-trailing\:large {
+ margin-inline-end 2.25rem !important;
+}
+
+.margin-trailing\:medium {
+ margin-inline-end: 1.5rem !important;
+}
+
+.margin-trailing\:small {
+ margin-inline-end: 1rem !important;
}
/*
@@ -565,3 +750,139 @@ video {
.shape\:fullrounded {
--borderRadius: 1.563rem !important;
}
+
+/*
+ sizes
+ */
+
+.size\:one {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 8.3333333333%;
+}
+
+.size\:two {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 16.6666666667%;
+}
+
+.size\:three {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 25%;
+}
+
+.size\:four {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 33.3333333333%;
+}
+
+.size\:five {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 41.6666666667%;
+}
+
+.size\:six {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 50%;
+}
+
+.size\:seven {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 58.3333333333%;
+}
+
+.size\:eight {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 66.6666666667%;
+}
+
+.size\:nine {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 75%;
+}
+
+.size\:ten {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 83.3333333333%;
+}
+
+.size\:eleven {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 91.6666666667%;
+}
+
+.size\:twelve {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ inline-size: 100%;
+}
+
+/*
+ offset
+ */
+
+.offset\:one {
+ margin-inline-start: 8.3333333333%;
+}
+
+.offset\:two {
+ margin-inline-start: 16.6666666667%;
+}
+
+.offset\:three {
+ margin-inline-start: 25%;
+}
+
+.offset\:four {
+ margin-inline-start: 33.3333333333%;
+}
+
+.offset\:five {
+ margin-inline-start: 41.6666666667%;
+}
+
+.offset\:six {
+ margin-inline-start: 50%;
+}
+
+.offset\:seven {
+ margin-inline-start: 58.3333333333%;
+}
+
+.offset\:eight {
+ margin-inline-start: 66.6666666667%;
+}
+
+.offset\:nine {
+ margin-inline-start: 75%;
+}
+
+.offset\:ten {
+ margin-inline-start: 83.3333333333%;
+}
+
+.offset\:eleven {
+ margin-inline-start: 91.6666666667%;
+}
diff --git a/Sources/HTMLKitComponents/Resources/css/helpers/group.css b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css
similarity index 91%
rename from Sources/HTMLKitComponents/Resources/css/helpers/group.css
rename to Sources/HTMLKitComponents/Resources/css/helpers/grouping.css
index 2afb4018..729a244f 100644
--- a/Sources/HTMLKitComponents/Resources/css/helpers/group.css
+++ b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css
@@ -2,7 +2,7 @@
The stylesheet for the grouping component.
*/
-.group {
+.grouping {
display: inline-flex;
flex-direction: row;
align-items: center;
diff --git a/Sources/HTMLKitComponents/Resources/css/layout/list.css b/Sources/HTMLKitComponents/Resources/css/layout/list.css
index fd66a703..c8ee2b41 100644
--- a/Sources/HTMLKitComponents/Resources/css/layout/list.css
+++ b/Sources/HTMLKitComponents/Resources/css/layout/list.css
@@ -3,7 +3,16 @@
*/
.list {
+ --paddingBlockStart: 0;
+ --paddingBlockEnd: 0;
+ --paddingInlineStart: 0;
+ --paddingInlineEnd: 0;
+
display: flex;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
list-style-type: none;
}
@@ -18,5 +27,20 @@
}
.list-row {
- overflow: hidden;
+ --paddingBlockStart: 0;
+ --paddingBlockEnd: 0;
+ --paddingInlineStart: 0;
+ --paddingInlineEnd: 0;
+
+ inline-size: 100%;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
+}
+
+.list.style\:listgroup > .list-row:is(:not(:last-child)) {
+ border-bottom: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: hsla(210, 14%, 89%, 1.0);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css
index 304170d9..7cc88c58 100644
--- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css
+++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css
@@ -3,11 +3,20 @@
*/
.hstack {
+ --paddingInlineStart: 0;
+ --paddingInlineEnd: 0;
+ --paddingBlockStart: 0;
+ --paddingBlockEnd: 0;
+
position: relative;
inline-size: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
}
.hstack.alignment\:top {
@@ -38,161 +47,90 @@
justify-content: space-evenly;
}
-/*
- The rulesets for the vertical stack component.
- */
-
-.vstack {
- position: relative;
- inline-size: 100%;
- display: flex;
- flex-direction: column;
+.hstack.space\:large {
+ gap: 2.25rem;
}
-.vstack.alignment\:leading {
- justify-content: flex-start;
+.hstack.space\:medium {
+ gap: 1.5rem;
}
-.vstack.alignment\:center {
- justify-content: center;
-}
-
-.vstack.alignment\:trailing {
- justify-content: flex-end;
+.hstack.space\:small {
+ gap: 1rem;
}
/*
The rulesets for the vertical stack component.
*/
-.zstack {
- position: absolute;
- inset: 0;
- z-index: 1;
- display: flex;
- inline-size: 100%;
-}
-
-/*
- The rulesets for the stack column component.
- */
-
-.stack-column {
+.vstack {
+ --paddingInlineStart: 0;
+ --paddingInlineEnd: 0;
+ --paddingBlockStart: 0;
+ --paddingBlockEnd: 0;
+
position: relative;
-}
-
-.stack-column.size\:1 {
- flex: 0 0 auto;
- inline-size: 8.3333333333%;
-}
-
-.stack-column.size\:2 {
- flex: 0 0 auto;
- inline-size: 16.6666666667%;
-}
-
-.stack-column.size\:3 {
- flex: 0 0 auto;
- inline-size: 25%;
-}
-
-.stack-column.size\:4 {
- flex: 0 0 auto;
- inline-size: 33.3333333333%;
-}
-
-.stack-column.size\:5 {
- flex: 0 0 auto;
- inline-size: 41.6666666667%;
-}
-
-.stack-column.size\:6 {
- flex: 0 0 auto;
- inline-size: 50%;
-}
-
-.stack-column.size\:7 {
- flex: 0 0 auto;
- inline-size: 58.3333333333%;
-}
-
-.stack-column.size\:8 {
- flex: 0 0 auto;
- inline-size: 66.6666666667%;
-}
-
-.stack-column.size\:9 {
- flex: 0 0 auto;
- inline-size: 75%;
-}
-
-.stack-column.size\:10 {
- flex: 0 0 auto;
- inline-size: 83.3333333333%;
-}
-
-.stack-column.size\:11 {
- flex: 0 0 auto;
- inline-size: 91.6666666667%;
-}
-
-.stack-column.size\:12 {
- flex: 0 0 auto;
inline-size: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
}
-.stack-column.alignment\:center {
- text-align: center;
-}
-
-.stack-column.alignment\:left {
- text-align: left;
-}
-
-.stack-column.alignment\:right {
- text-align: right;
-}
-
-.stack-column.offset\:1 {
- margin-inline-start: 8.3333333333%;
+.vstack.alignment\:leading {
+ align-items: flex-start;
}
-.stack-column.offset\:2 {
- margin-inline-start: 16.6666666667%;
+.vstack.alignment\:center {
+ align-items: center;
}
-.stack-column.offset\:3 {
- margin-inline-start: 25%;
+.vstack.alignment\:trailing {
+ align-items: flex-end;
}
-.stack-column.offset\:4 {
- margin-inline-start: 33.3333333333%;
+.vstack.space\:around {
+ justify-content: space-around;
}
-.stack-column.offset\:5 {
- margin-inline-start: 41.6666666667%;
+.vstack.space\:between {
+ justify-content: space-between;
}
-.stack-column.offset\:6 {
- margin-inline-start: 50%;
+.vstack.space\:evenly {
+ justify-content: space-evenly;
}
-.stack-column.offset\:7 {
- margin-inline-start: 58.3333333333%;
+.vstack.space\:large {
+ gap: 2.25rem;
}
-.stack-column.offset\:8 {
- margin-inline-start: 66.6666666667%;
+.vstack.space\:medium {
+ gap: 1.5rem;
}
-.stack-column.offset\:9 {
- margin-inline-start: 75%;
+.vstack.space\:small {
+ gap: 1rem;
}
-.stack-column.offset\:10 {
- margin-inline-start: 83.3333333333%;
-}
+/*
+ The rulesets for the vertical stack component.
+ */
-.stack-column.offset\:11 {
- margin-inline-start: 91.6666666667%;
+.zstack {
+ --paddingInlineStart: 0;
+ --paddingInlineEnd: 0;
+ --paddingBlockStart: 0;
+ --paddingBlockEnd: 0;
+
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ display: flex;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css
index 432f3230..3cab5f03 100644
--- a/Sources/HTMLKitComponents/Resources/css/typography/link.css
+++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css
@@ -158,6 +158,38 @@
--lineHeight: 1.5;
}
+.link.height\:small {
+ --lineHeight: 1.0;
+}
+
+.link.height\:medium {
+ --lineHeight: 1.75;
+}
+
+.link.height\:large {
+ --lineHeight: 2.25;
+}
+
+.link.limit\:one {
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.link.limit\:two {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.link.limit\:three {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
.scheme\:dark .link, .link.scheme\:dark {
- --foregroundColor: 0, 0%, 100%;
}
diff --git a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css
index a870562b..f43bb6f6 100644
--- a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css
+++ b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css
@@ -46,3 +46,10 @@
--fontSize: 2rem;
--lineHeight: 2.25;
}
+
+.scheme\:dark .symbol, .symbol.scheme\:dark {
+}
+
+.symbol + .text {
+ margin-inline-start: 0.75rem;
+}
diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css
index cdb5099d..d8304029 100644
--- a/Sources/HTMLKitComponents/Resources/css/typography/text.css
+++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css
@@ -161,6 +161,38 @@
--lineHeight: 1.5;
}
+.text.height\:small {
+ --lineHeight: 1.0;
+}
+
+.text.height\:medium {
+ --lineHeight: 1.75;
+}
+
+.text.height\:large {
+ --lineHeight: 2.25;
+}
+
+.text.limit\:one {
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.text.limit\:two {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.text.limit\:three {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
.scheme\:dark .text, .text.scheme\:dark {
- --foregroundColor: 0, 0%, 100%;
}
diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css
index 09ac51e7..3b361ada 100644
--- a/Sources/HTMLKitComponents/Resources/css/views/card.css
+++ b/Sources/HTMLKitComponents/Resources/css/views/card.css
@@ -15,21 +15,25 @@
*/
.card {
- --paddingInline: 1.0rem;
- --paddingBlock: 0.5rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
+ --paddingBlockStart: 0.5rem;
+ --paddingBlockEnd: 0.5rem;
--borderWidth: 1px;
--borderColor: 210, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
position: relative;
display: flex;
flex-direction: column;
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
}
.card .card-header {
@@ -39,8 +43,10 @@
}
.card .card-body {
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
border-end-start-radius: var(--borderRadius);
border-end-end-radius: var(--borderRadius);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css
index a5c0f88d..ddb4938d 100644
--- a/Sources/HTMLKitComponents/Resources/css/views/image.css
+++ b/Sources/HTMLKitComponents/Resources/css/views/image.css
@@ -23,6 +23,14 @@
border-radius: var(--borderRadius);
}
+.image.aspect\:equal {
+ aspect-ratio: 1/1;
+}
+
+.image.aspect\:unequal {
+ aspect-ratio: 2/1;
+}
+
.image.fit\:contain {
object-fit:contain;
}
@@ -52,15 +60,15 @@
}
.image.scale\:small {
- --inlineSize: 25%;
+ --inlineSize: 3.125rem;
}
.image.scale\:medium {
- --inlineSize: 50%;
+ --inlineSize: 12.5rem;
}
.image.scale\:large {
- --inlineSize: 75%;
+ --inlineSize: 25rem;
}
.image.shape\:circle {
diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css
index 7e138263..1362311d 100644
--- a/Sources/HTMLKitComponents/Resources/css/views/modal.css
+++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css
@@ -15,20 +15,27 @@
*/
.modal {
- --paddingBlock: 0.75rem;
- --paddingInline: 1.0rem;
+ --paddingBlockStart: 0.75rem;
+ --paddingBlockEnd: 0.75rem;
+ --paddingInlineStart: 1.0rem;
+ --paddingInlineEnd: 1.0rem;
--borderWidth: 1px;
--borderColor: 10, 14%, 89%;
--borderRadius: 0;
+ --borderOpacity: 1.0;
--backgroundColor: 0, 0%, 100%;
+ --backgroundOpacity: 1.0;
- padding-block: var(--paddingBlock);
- padding-inline: var(--paddingInline);
+ margin: auto;
+ padding-block-start: var(--paddingBlockStart);
+ padding-block-end: var(--paddingBlockEnd);
+ padding-inline-start: var(--paddingInlineStart);
+ padding-inline-end: var(--paddingInlineEnd);
border-width: var(--borderWidth);
border-style: solid;
- border-color: hsla(var(--borderColor), 1.0);
+ border-color: hsla(var(--borderColor), var(--borderOpacity));
border-radius: var(--borderRadius);
- background-color: hsla(var(--backgroundColor), 1.0);
+ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity));
box-shadow: 0 15px 35px hsla(0,0%, 0%, 0.2);
}
diff --git a/Sources/HTMLKitComponents/Resources/css/views/navigation.css b/Sources/HTMLKitComponents/Resources/css/views/navigation.css
new file mode 100644
index 00000000..c62c8a2a
--- /dev/null
+++ b/Sources/HTMLKitComponents/Resources/css/views/navigation.css
@@ -0,0 +1,24 @@
+/*
+ The stylesheet for the navigation component.
+ */
+
+.navigation {
+ position: relative;
+}
+
+.navigation > .list > .list-row > .link {
+ display: flex;
+ align-items: center;
+ padding-block: 0.5rem;
+ padding-inline: 1.0rem;
+}
+
+.navigation > .list > .list-row > .link:hover {
+ border-radius: 5px;
+ background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.navigation > .list .list-row .link.state\:active {
+ border-radius: 5px;
+ background-color: hsla(var(--primaryColor), 1.0) !important;
+}
diff --git a/Sources/HTMLKitComponents/Resources/css/views/snippet.css b/Sources/HTMLKitComponents/Resources/css/views/snippet.css
index 611f8d1e..4ca6c422 100644
--- a/Sources/HTMLKitComponents/Resources/css/views/snippet.css
+++ b/Sources/HTMLKitComponents/Resources/css/views/snippet.css
@@ -13,7 +13,8 @@
*/
.snippet {
- --paddingInline: 1.0em;
+ --paddingInlineStart: 1.0em;
+ --paddingInlineEnd: 1.0em;
--fontSize: 1.0rem;
--fontWeight: 400;
--lineHeight: 1.5;
diff --git a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js
index 32addc14..118ad235 100644
--- a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js
+++ b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js
@@ -22,8 +22,8 @@
window.addEventListener('click', function (event) {
- if(!event.target.matches('.dropdown-label')) {
- self.hideDropdownList();
+ if(!self.element.contains(event.target)) {
+ self.hideDropdownList();
}
});
};
diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/select.js b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js
similarity index 100%
rename from Sources/HTMLKitComponents/Resources/js/components/forms/select.js
rename to Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js
diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js
new file mode 100644
index 00000000..1cd1bbb6
--- /dev/null
+++ b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js
@@ -0,0 +1,41 @@
+ (function() {
+
+ var Navigation = function (element) {
+
+ this.element = element;
+ this.links = element.getElementsByClassName('link');
+
+ this.checkLocation();
+ };
+
+ Navigation.prototype.checkLocation = function () {
+
+ var self = this;
+
+ var currentLocation = location.pathname;
+
+ for(let link of this.links) {
+
+ if(link.getAttribute('href') === currentLocation) {
+ self.toggleState(link);
+ }
+ }
+ };
+
+ Navigation.prototype.toggleState = function (target) {
+ target.classList.add('state:active');
+ };
+
+ var navigation = document.getElementsByClassName('navigation');
+
+ if(navigation.length > 0) {
+
+ for(var i = 0; i < navigation.length; i++) {
+
+ (function(i) {
+ new Navigation(navigation[i]);
+ })(i);
+ }
+ }
+ }());
+
diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift
index d7096b5b..2258a678 100644
--- a/Sources/HTMLKitComponents/Tokens.swift
+++ b/Sources/HTMLKitComponents/Tokens.swift
@@ -10,636 +10,665 @@ public enum Tokens {
public enum FlowDirection: String {
/// Aligns the elements vertically.
- case vertical = "direction:vertical"
+ case vertical = "vertical"
/// Aligns the elements horizontally.
- case horizontal = "direction:horizontal"
+ case horizontal = "horizontal"
}
/// A alignment for text along the horizontal axis.
public enum TextAlignment: String {
/// Aligns the text left.
- case left = "alignment:left"
+ case left = "left"
/// Aligns the text in the middle.
- case center = "alignment:center"
+ case center = "center"
/// Aligns the text right.
- case right = "alignment:right"
+ case right = "right"
}
/// A size for column.
public enum ColumnSize: String {
/// Sets the size to 8.3 %.
- case one = "size:1"
+ case one = "one"
/// Sets the size to 16.67 %.
- case two = "size:2"
+ case two = "two"
/// Sets the size to 25 %.
- case three = "size:3"
+ case three = "three"
/// Sets the size to 33.3 %.
- case four = "size:4"
+ case four = "four"
/// Sets the size to 41.67 %.
- case five = "size:5"
+ case five = "five"
/// Sets the size to 50 %.
- case six = "size:6"
+ case six = "six"
/// Sets the size to 58.3 %.
- case seven = "size:7"
+ case seven = "seven"
/// Sets the size to 66.67 %.
- case eight = "size:8"
+ case eight = "eight"
/// Sets the size to 75 %.
- case nine = "size:9"
+ case nine = "nine"
/// Sets the size to 83.3%.
- case ten = "size:10"
+ case ten = "ten"
/// Sets the size to 91.67 %.
- case eleven = "size:11"
+ case eleven = "eleven"
/// Sets the size to 100 %.
- case twelve = "size:12"
+ case twelve = "twelve"
}
/// A color for text.
public enum ForegroundColor: String {
/// Changes the foreground color to black.
- case black = "color:black"
+ case black = "black"
/// Changes the foreground color to white.
- case white = "color:white"
+ case white = "white"
/// Changes the foreground color to blue.
- case blue = "color:blue"
+ case blue = "blue"
/// Changes the foreground color to brown.
- case brown = "color:brown"
+ case brown = "brown"
/// Changes the foreground color to cyan.
- case cyan = "color:cyan"
+ case cyan = "cyan"
/// Changes the foreground color to green.
- case green = "color:green"
+ case green = "green"
/// Changes the foreground color to indigo.
- case indigo = "color:indigo"
+ case indigo = "indigo"
/// Changes the foreground color to mint.
- case mint = "color:mint"
+ case mint = "mint"
/// Changes the foreground color to pink.
- case pink = "color:pink"
+ case pink = "pink"
/// Changes the foreground color to purple.
- case purple = "color:purple"
+ case purple = "purple"
/// Changes the foreground color to red.
- case red = "color:red"
+ case red = "red"
/// Changes the foreground color to teal.
- case teal = "color:teal"
+ case teal = "teal"
/// Changes the foreground color to orange.
- case orange = "color:orange"
+ case orange = "orange"
/// Changes the foreground color to yellow.
- case yellow = "color:yellow"
+ case yellow = "yellow"
/// Changes the foreground color to gray.
- case gray = "color:gray"
+ case gray = "gray"
/// Changes the foreground color to silver.
- case silver = "color:silver"
+ case silver = "silver"
/// Changes the foreground color to black.
- case highlight = "color:highlight"
+ case highlight = "highlight"
/// Changes the foreground color to black.
- case primary = "color:primary"
+ case primary = "primary"
/// Changes the foreground color to black.
- case secondary = "color:secondary"
+ case secondary = "secondary"
}
/// A size for text.
public enum FontSize: String {
/// Changes the size to small.
- case tiny = "size:tiny"
+ case tiny = "tiny"
/// Changes the size to small.
- case small = "size:small"
+ case small = "small"
/// Changes the size to medium.
- case medium = "size:medium"
+ case medium = "medium"
/// Changes the size to large.
- case large = "size:large"
+ case large = "large"
/// Changes the size to extra large.
- case extralarge = "size:extralarge"
+ case extralarge = "extralarge"
}
/// A transformation for the text.
public enum TextTransformation: String {
/// Converts all characters to uppercase.
- case uppercase = "transformation:uppercase"
+ case uppercase = "uppercase"
/// Converts all characters to lowercase.
- case lowercase = "transformation:lowercase"
+ case lowercase = "lowercase"
/// Capitalizes the first letter of each word.
- case capitalize = "transformation:capitalize"
+ case capitalize = "capitalize"
}
/// A weight for text.
public enum FontWeight: String {
/// Sets the weight to 100.
- case thin = "weight:thin"
+ case thin = "thin"
/// Sets the weight to 200.
- case ultraLight = "weight:ultralight"
+ case ultraLight = "ultralight"
/// Sets the weight to 300.
- case light = "weight:light"
+ case light = "light"
/// Sets the weight to 400.
- case regular = "weight:regular"
+ case regular = "regular"
/// Sets the weight to 500.
- case medium = "weight:medium"
+ case medium = "medium"
/// Sets the weight to 600.
- case semibold = "weight:semibold"
+ case semibold = "semibold"
/// Sets the weight to 700.
- case bold = "weight:bold"
+ case bold = "bold"
/// Sets the weight to 900.
- case heavy = "weight:heavy"
+ case heavy = "heavy"
/// Sets the weight to 950.
- case black = "weight:black"
+ case black = "black"
}
/// A decoration for text.
public enum TextDecoration: String {
- case underline = "decoration:underline"
+ case underline = "underline"
- case overline = "decoration:overline"
+ case overline = "overline"
- case strikeThrough = "decoration:strikethrough"
+ case strikeThrough = "strikethrough"
- case none = "decoration:none"
+ case none = "none"
}
public enum FontStyle: String {
- case italic = "style:italic"
+ case italic = "italic"
- case oblique = "style:oblique"
+ case oblique = "oblique"
}
public enum BackgroundColor: String {
/// Changes the background color to black.
- case black = "background:black"
+ case black = "black"
/// Changes the background color to white.
- case white = "background:white"
+ case white = "white"
/// Changes the background color to blue.
- case blue = "background:blue"
+ case blue = "blue"
/// Changes the background color to brown.
- case brown = "background:brown"
+ case brown = "brown"
/// Changes the background color to cyan.
- case cyan = "background:cyan"
+ case cyan = "cyan"
/// Changes the background color to green.
- case green = "background:green"
+ case green = "green"
/// Changes the background color to indigo.
- case indigo = "background:indigo"
+ case indigo = "indigo"
/// Changes the background color to mint.
- case mint = "background:mint"
+ case mint = "mint"
/// Changes the background color to pink.
- case pink = "background:pink"
+ case pink = "pink"
/// Changes the background color to purple.
- case purple = "background:purple"
+ case purple = "purple"
/// Changes the background color to red.
- case red = "background:red"
+ case red = "red"
/// Changes the background color to teal.
- case teal = "background:teal"
+ case teal = "teal"
/// Changes the background color to ornage.
- case orange = "background:orange"
+ case orange = "orange"
/// Changes the background color to yellow.
- case yellow = "background:yellow"
+ case yellow = "yellow"
/// Changes the background color to gray.
- case gray = "background:gray"
+ case gray = "gray"
/// Changes the background color to silver.
- case silver = "background:silver"
+ case silver = "silver"
- case highlight = "background:highlight"
+ case highlight = "highlight"
- case primary = "background:primary"
+ case primary = "primary"
- case secondary = "background:secondary"
+ case secondary = "secondary"
- case transparent = "background:transparent"
+ case transparent = "transparent"
}
/// A resize for an element.
public enum ObjectFit: String {
-
+
/// Resizes the content to fit within the parent.
- case contain = "fit:contain"
+ case contain = "contain"
/// Resizes the content to fill the parent. The overflow will be clipped.
- case cover = "fit:cover"
+ case cover = "cover"
/// Resizes the content to fill the parent. If necessary it will be streched or squished.
- case fill = "fit:fill"
+ case fill = "fill"
- case scaleDown = "fit:scaledown"
+ case scaleDown = "scaledown"
/// Does not resize.
- case none = "fit:none"
+ case none = "none"
}
public enum OpacityValue: String {
- case intransparent = "opacity:intransparent"
+ case intransparent = "intransparent"
- case transparent = "opacity:transparent"
+ case transparent = "transparent"
}
/// A offset for a column.
public enum ColumnOffset: String {
/// Sets the offset to 8.3 %.
- case one = "offset:1"
+ case one = "one"
/// Sets the offset to 16.67 %.
- case two = "offset:2"
+ case two = "two"
/// Sets the offset to 25 %.
- case three = "offset:3"
+ case three = "three"
/// Sets the offset to 33.33 %.
- case four = "offset:4"
+ case four = "four"
/// Sets the offset to 41.67 %.
- case five = "offset:5"
+ case five = "five"
/// Sets the offset to 50 %.
- case six = "offset:6"
+ case six = "six"
/// Sets the offset to 58.3 %.
- case seven = "offset:7"
+ case seven = "seven"
/// Sets the offset to 66.7 %.
- case eight = "offset:8"
+ case eight = "eight"
/// Sets the offset to 75 %.
- case nine = "offset:9"
+ case nine = "nine"
/// Sets the offset to 83.3 %.
- case ten = "offset:10"
+ case ten = "ten"
/// Sets the offset to 91.67 %.
- case eleven = "offset:11"
+ case eleven = "eleven"
}
public enum ImageScale: String {
- case small = "scale:small"
- case medium = "scale:medium"
- case large = "scale:large"
+ case small = "small"
+ case medium = "medium"
+ case large = "large"
}
public enum ClipShape: String {
- case circle = "shape:circle"
+ case circle = "circle"
}
/// Position along the z-axis.
public enum PositionIndex: String {
/// Sets the stack order to 1.
- case one = "zindex:1"
+ case one = "1"
/// Sets the stack order to 2.
- case two = "zindex:2"
+ case two = "2"
/// Sets the stack order to 3.
- case three = "zindex:3"
+ case three = "3"
/// Sets the stack order to 4.
- case four = "zindex:4"
+ case four = "4"
/// Sets the stack order to 5.
- case five = "zindex:5"
+ case five = "5"
}
/// A style for text.
public enum TextStyle: String {
/// Formats the text as title.
- case title = "style:title"
+ case title = "title"
/// Formats the text as headline.
- case headline = "style:headline"
+ case headline = "headline"
/// Formats the text as subheadline.
- case subheadline = "style:subheadline"
+ case subheadline = "subheadline"
/// Formats the text as body.
- case body = "style:body"
+ case body = "body"
/// Formats the text as callout.
- case callout = "style:callout"
+ case callout = "callout"
/// Formats the text as caption.
- case caption = "style:caption"
+ case caption = "caption"
/// Formats the text as footnote.
- case footnote = "style:footnote"
+ case footnote = "footnote"
/// Formats the text as code.
- case code = "style:code"
+ case code = "code"
}
/// A alignment along the vertically axis.
public enum VerticalAlignment: String {
/// Aligns at the top.
- case top = "alignment:top"
+ case top = "top"
/// Aligns in the middle.
- case center = "alignment:center"
+ case center = "center"
/// Aligns at the bottom.
- case bottom = "alignment:bottom"
+ case bottom = "bottom"
/// Aligns with the parent's baseline.
- case baseline = "alignment:baseline"
+ case baseline = "baseline"
}
/// A alignment along the horizontal axis.
public enum HorizontalAlignment: String {
/// Aligns left.
- case leading = "alignment:leading"
+ case leading = "leading"
/// Aligns center.
- case center = "alignment:center"
+ case center = "center"
/// Aligns right.
- case trailing = "alignment:trailing"
+ case trailing = "trailing"
}
public enum ContentSpace: String {
- case around = "space:around"
- case between = "space:between"
- case evenly = "space:evenly"
+ case around = "around"
+ case between = "between"
+ case evenly = "evenly"
+ case large = "large"
+ case medium = "medium"
+ case small = "small"
}
public enum SyntaxHighlight: String {
- case plaintext = "hightlight:plaintext"
- case html = "hightlight:html"
- case css = "hightlight:css"
- case javascript = "hightlight:javascript"
+ case plaintext = "plaintext"
+ case html = "html"
+ case css = "css"
+ case javascript = "javascript"
}
/// A style for button.
public enum ButtonStyle: String {
- case primary = "style:primary"
- case secondary = "style:secondary"
- case outline = "style:outline"
+ case primary = "primary"
+ case secondary = "secondary"
+ case outline = "outline"
}
/// A shape of the button.
public enum BorderShape: String {
- case smallrounded = "shape:smallrounded"
- case largerounded = "shape:largerounded"
- case fullrounded = "shape:fullrounded"
+ case smallrounded = "smallrounded"
+ case largerounded = "largerounded"
+ case fullrounded = "fullrounded"
}
/// A size of a button.
public enum ButtonSize: String {
/// Sets the size to 100 %.
- case full = "size:full"
+ case full = "full"
/// Sets the size to 75 %.
- case large = "size:large"
+ case large = "large"
/// Sets the size to 50 %.
- case medium = "size:medium"
+ case medium = "medium"
/// Sets the size to 25 %.
- case small = "size:small"
+ case small = "small"
}
/// A ratio for the grid.
public enum ItemRatio: String {
/// Sets the ratio to 15%.
- case sixth = "ratio:15"
+ case sixth = "15"
/// Sets the ratio to 20 %.
- case fifth = "ratio:20"
+ case fifth = "20"
/// Sets the ratio to 25 %.
- case quarter = "ratio:25"
+ case quarter = "25"
/// Sets the ratio to 33 %.
- case third = "ratio:33"
+ case third = "33"
/// Sets the ratio to 50 %.
- case half = "ratio:50"
+ case half = "50"
}
/// A style for a list.
public enum ListStyle: String {
- case grouped = "style:grouped"
- case accordion = "style:accordion"
- case tab = "style:tab"
+ case listgroup = "listgroup"
}
/// A state for the view.
public enum ViewState: String {
/// Sets the state to active.
- case active = "state:active"
+ case active = "active"
/// Sets the state to disabled.
- case disabled = "state:disabled"
+ case disabled = "disabled"
/// Sets the state to hidden.
- case hidden = "state:hidden"
+ case hidden = "hidden"
/// Sets the state to visible.
- case visible = "state:visible"
+ case visible = "visible"
}
public enum BorderColor: String {
/// Changes the border color to black.
- case black = "border:black"
+ case black = "black"
/// Changes the border color to white.
- case white = "border:white"
+ case white = "white"
/// Changes the border color to blue.
- case blue = "border:blue"
+ case blue = "blue"
/// Changes the border color to brown.
- case brown = "border:brown"
+ case brown = "brown"
/// Changes the border color to cyan.
- case cyan = "border:cyan"
+ case cyan = "cyan"
/// Changes the border color to green.
- case green = "border:green"
+ case green = "green"
/// Changes the border color to indigo.
- case indigo = "border:indigo"
+ case indigo = "indigo"
/// Changes the border color to mint.
- case mint = "border:mint"
+ case mint = "mint"
/// Changes the border color to pink.
- case pink = "border:pink"
+ case pink = "pink"
/// Changes the border color to purple.
- case purple = "border:purple"
+ case purple = "purple"
/// Changes the border color to red.
- case red = "border:red"
+ case red = "red"
/// Changes the border color to teal.
- case teal = "border:teal"
+ case teal = "teal"
/// Changes the border color to ornage.
- case orange = "border:orange"
+ case orange = "orange"
/// Changes the border color to yellow.
- case yellow = "border:yellow"
+ case yellow = "yellow"
/// Changes the border color to gray.
- case gray = "border:gray"
+ case gray = "gray"
/// Changes the border color to silver.
- case silver = "border:silver"
+ case silver = "silver"
- case primary = "border:primary"
+ case primary = "primary"
- case secondary = "border:secondary"
+ case secondary = "secondary"
- case transparent = "border:transparent"
+ case transparent = "transparent"
}
public enum FocusColor: String {
/// Changes the border color to black.
- case black = "focus:black"
+ case black = "black"
/// Changes the border color to white.
- case white = "focus:white"
+ case white = "white"
/// Changes the border color to blue.
- case blue = "focus:blue"
+ case blue = "blue"
/// Changes the border color to brown.
- case brown = "focus:brown"
+ case brown = "brown"
/// Changes the border color to cyan.
- case cyan = "focus:cyan"
+ case cyan = "cyan"
/// Changes the border color to green.
- case green = "focus:green"
+ case green = "green"
/// Changes the border color to indigo.
- case indigo = "focus:indigo"
+ case indigo = "indigo"
/// Changes the border color to mint.
- case mint = "focus:mint"
+ case mint = "mint"
/// Changes the border color to pink.
- case pink = "focus:pink"
+ case pink = "pink"
/// Changes the border color to purple.
- case purple = "focus:purple"
+ case purple = "purple"
/// Changes the border color to red.
- case red = "focus:red"
+ case red = "red"
/// Changes the border color to teal.
- case teal = "focus:teal"
+ case teal = "teal"
/// Changes the border color to ornage.
- case orange = "focus:orange"
+ case orange = "orange"
/// Changes the border color to yellow.
- case yellow = "focus:yellow"
+ case yellow = "yellow"
/// Changes the border color to gray.
- case gray = "focus:gray"
+ case gray = "gray"
/// Changes the border color to silver.
- case silver = "focus:silver"
+ case silver = "silver"
- case primary = "focus:primary"
+ case primary = "primary"
- case secondary = "focus:secondary"
-
- case transparent = "focus:transparent"
+ case secondary = "secondary"
}
public enum ColorScheme: String {
/// Changes the color scheme to dark.
- case dark = "scheme:dark"
+ case dark = "dark"
/// Changes the color scheme to light.
- case light = "scheme:light"
+ case light = "light"
}
- public enum BoxPadding: String {
+ public enum PaddingLength: String {
- case large = "padding:large"
+ case large = "large"
+ case medium = "medium"
+ case small = "small"
+ }
+
+ public enum MarginLength: String {
- case medium = "padding:medium"
+ case large = "large"
+ case medium = "medium"
+ case small = "small"
+ }
+
+ public enum AspectRatio: String {
- case small = "padding:small"
+ case equal = "equal"
+ case unequal = "unequal"
}
+
+ public enum NavigationStyle: String {
+
+ case plain = "plain"
+ }
+
+ public enum LineHeight: String {
+
+ case small = "small"
+ case medium = "medium"
+ case large = "large"
+ }
+
+ public enum LineLimit: String {
+
+ case one = "one"
+ case two = "two"
+ case three = "three"
+ }
}
diff --git a/Sources/Utilities/Minifier/Minifier.swift b/Sources/Utilities/Minifier/Minifier.swift
index df89deb4..ab96cce7 100644
--- a/Sources/Utilities/Minifier/Minifier.swift
+++ b/Sources/Utilities/Minifier/Minifier.swift
@@ -28,7 +28,7 @@ public struct Minifier {
/// Minifies a stylesheet string
public func minify(css content: String) -> String {
- var tokens = Stylesheet(log: .debug).consume(content)
+ var tokens = Stylesheet().consume(content)
if compression.contains(.stripComments) {
tokens.removeAll(where: { $0 is Stylesheet.CommentToken })
@@ -94,6 +94,7 @@ public struct Minifier {
if previous >= tokens.startIndex && next < tokens.endIndex {
+ // keep the whitespace if its between two word tokens
if tokens[previous] is Javascript.WordToken && tokens[next] is Javascript.WordToken {
yield.append(token)
}
diff --git a/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift b/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift
index fcd7ace7..132aa8fb 100644
--- a/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift
+++ b/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift
@@ -197,7 +197,7 @@ internal class Javascript {
return .numeric
}
- if character.isOperator {
+ if character.isOperator || character.isExclamationMark {
self.emit(token: FormatToken(type: .operator, value: String(character)))
diff --git a/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift b/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift
index 5a4ba043..6bc4ef97 100644
--- a/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift
+++ b/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift
@@ -516,7 +516,7 @@ internal class Stylesheet {
return .stringvalue
}
- if character.isNumber {
+ if character.isNumber || character.isHyphenMinus {
self.assign(token: ValueToken(type: .numeric, value: String(character)))
diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift
index 8423add0..caa6201c 100644
--- a/Tests/HTMLKitComponentsTests/ComponentTests.swift
+++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift
@@ -44,13 +44,13 @@ final class ComponentTests: XCTestCase {
func testGroup() throws {
let view = TestView {
- HTMLKitComponents.Group {
+ Grouping {
}
}
XCTAssertEqual(try renderer.render(view: view),
"""
-
+
"""
)
}
@@ -359,21 +359,6 @@ final class ComponentTests: XCTestCase {
)
}
-
- func testStackColumn() throws {
-
- let view = TestView {
- StackColumn(size: .twelve) {
- }
- }
-
- XCTAssertEqual(try renderer.render(view: view),
- """
-
- """
- )
- }
-
func testText() throws {
let view = TestView {
@@ -417,7 +402,7 @@ final class ComponentTests: XCTestCase {
XCTAssertEqual(try renderer.render(view: view),
"""
- \
+ \
<div>
\
<h3>headline</h3>
\
</div>
\
@@ -554,4 +539,19 @@ final class ComponentTests: XCTestCase {
"""
)
}
+
+
+ func testNavigation() throws {
+
+ let view = TestView {
+ HTMLKitComponents.Navigation {
+ }
+ }
+
+ XCTAssertEqual(try renderer.render(view: view),
+ """
+
+ """
+ )
+ }
}
diff --git a/Tests/UtilitiesTests/Minification/JavascriptTests.swift b/Tests/UtilitiesTests/Minification/JavascriptTests.swift
index 181642a7..6ca1606e 100644
--- a/Tests/UtilitiesTests/Minification/JavascriptTests.swift
+++ b/Tests/UtilitiesTests/Minification/JavascriptTests.swift
@@ -136,8 +136,59 @@ final class JavascriptTests: XCTestCase {
}
"""
- XCTAssertEqual(minifier.minify(js: switchcase), "switch(condition){case x:break;case'y':break;default:}"
- )
+ XCTAssertEqual(minifier.minify(js: switchcase), "switch(condition){case x:break;case'y':break;default:}")
+
+ // ...if else statement
+
+ let ifelse = """
+ if(condition) {
+ console.log('true');
+ } else {
+ console.log('false');
+ }
+ """
+
+ XCTAssertEqual(minifier.minify(js: ifelse), "if(condition){console.log('true');}else{console.log('false');}")
+ }
+
+ func testConditions() {
+
+ // ...greater than condition
+
+ let greatherthan = """
+ if(variable < 10) {
+ console.log('true');
+ } else {
+ console.log('false');
+ }
+ """
+
+ XCTAssertEqual(minifier.minify(js: greatherthan), "if(variable<10){console.log('true');}else{console.log('false');}")
+
+ // ...equal condition
+
+ let equalto = """
+ if(variable == 'variable') {
+ console.log('true');
+ } else {
+ console.log('false');
+ }
+ """
+
+ XCTAssertEqual(minifier.minify(js: equalto), "if(variable=='variable'){console.log('true');}else{console.log('false');}")
+
+
+ // ...not operator condition
+
+ let negationperator = """
+ if(!variable) {
+ console.log('true');
+ } else {
+ console.log('false');
+ }
+ """
+
+ XCTAssertEqual(minifier.minify(js: negationperator), "if(!variable){console.log('true');}else{console.log('false');}")
}
func testMinfiyFunctionPattern() {
diff --git a/Tests/UtilitiesTests/Minification/StylesheetTests.swift b/Tests/UtilitiesTests/Minification/StylesheetTests.swift
index 733e39dd..72557fb4 100644
--- a/Tests/UtilitiesTests/Minification/StylesheetTests.swift
+++ b/Tests/UtilitiesTests/Minification/StylesheetTests.swift
@@ -314,15 +314,25 @@ final class StylesheetTests: XCTestCase {
XCTAssertEqual(minifier.minify(css: functionvalue), ".selector{property:function();}")
- // ....rule mark
+ // ...rule mark
- let rulevalue = """
+ let rulemark = """
.selector {
property: function() !important;
}
"""
- XCTAssertEqual(minifier.minify(css: rulevalue), ".selector{property:function()!important;}")
+ XCTAssertEqual(minifier.minify(css: rulemark), ".selector{property:function()!important;}")
+
+ // ...negative margin
+
+ let negativevalue = """
+ .selector {
+ property: -0.0px;
+ }
+ """
+
+ XCTAssertEqual(minifier.minify(css: negativevalue), ".selector{property:-0.0px;}")
}
// Tests minifing a funtion