mpetuska · mpetuska · May 25, 2022 · May 25, 2022 · May 25, 2022
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [x] mdc-elevation
 - [x] mdc-line-ripple
 - [x] mdc-floating-label
+- [x] mdc-notched-outline
 - Proper `@DslMarker` usage to prevent leaking scopes
 
 ### Changed

@@ -1,4 +1,4 @@
-package dev.petuska.kmdc.button
+package dev.petuska.kmdc.floating.label
 
 import androidx.compose.runtime.Composable
 import dev.petuska.kmdc.core.*

@@ -1,6 +1,6 @@
 @file:JsModule("@material/floating-label")
 
-package dev.petuska.kmdc.button
+package dev.petuska.kmdc.floating.label
 
 import dev.petuska.kmdc.core.MDCComponent
 import dev.petuska.kmdc.core.MDCExternalAPI

@@ -0,0 +1,12 @@
+plugins {
+  id("convention.kmdc")
+}
+
+kmdc {
+  mdc by "notched-outline"
+  dependencies {
+    main {
+      api(kmdc("floating-label"))
    }
+  }
+}
@@ -0,0 +1,102 @@
+package dev.petuska.kmdc.notched.outline
+
+import androidx.compose.runtime.Composable
+import dev.petuska.kmdc.core.*
+import org.jetbrains.compose.web.dom.ElementScope
+import org.jetbrains.compose.web.dom.Span
+import org.w3c.dom.HTMLSpanElement
+
+@JsModule("@material/notched-outline/mdc-notched-outline.scss")
+private external val Style: dynamic
+
+public interface MDCNotchedOutlineScope : ElementScope<HTMLSpanElement>
+
+/**
+ * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline)
+ */
+@MDCDsl
+@Composable
+public fun MDCNotchedOutline(
+  notched: Boolean = false,
+  noLabel: Boolean = false,
+  attrs: MDCAttrsRaw<HTMLSpanElement>? = null,
+  content: MDCContent<MDCNotchedOutlineScope>? = null,
+) {
+  MDCNotchedOutlineLayout(
+    notched = notched,
+    noLabel = noLabel,
+    attrs = attrs,
+  ) {
+    MDCProvider(::MDCNotchedOutline) {
+      applyContent(content)
+    }
+  }
+}
+
+/**
+ * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline)
+ */
+@Composable
+@KMDCInternalAPI
+public fun MDCNotchedOutlineLayout(
+  notched: Boolean = false,
+  noLabel: Boolean = false,
+  attrs: MDCAttrsRaw<HTMLSpanElement>? = null,
+  content: MDCContent<MDCNotchedOutlineScope>? = null,
+) {
+  Style
+  Span(
+    attrs = {
+      classes("mdc-notched-outline")
+      if (notched) classes("mdc-notched-outline--notched")
+      if (noLabel) classes("mdc-notched-outline--no-label")
+      attrs?.invoke(this)
+    },
+    content = content.reinterpret(),
+  )
+}
+
+/**
+ * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline)
+ */
+@MDCDsl
+@Composable
+public fun MDCNotchedOutlineScope.Leading(
+  attrs: MDCAttrsRaw<HTMLSpanElement>? = null,
+  content: MDCContentRaw<HTMLSpanElement>? = null,
+) {
+  Span(attrs = {
+    classes("mdc-notched-outline__leading")
+    applyAttrs(attrs)
+  }, content = content)
+}
+
+/**
+ * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline)
+ */
+@MDCDsl
+@Composable
+public fun MDCNotchedOutlineScope.Notch(
+  attrs: MDCAttrsRaw<HTMLSpanElement>? = null,
+  content: MDCContentRaw<HTMLSpanElement>? = null,
+) {
+  Span(attrs = {
+    classes("mdc-notched-outline__notch")
+    applyAttrs(attrs)
+  }, content = content)
+}
+
+/**
+ * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-notched-outline)
+ */
+@MDCDsl
+@Composable
+public fun MDCNotchedOutlineScope.Trailing(
+  attrs: MDCAttrsRaw<HTMLSpanElement>? = null,
+  content: MDCContentRaw<HTMLSpanElement>? = null,
+) {
+  Span(attrs = {
+    classes("mdc-notched-outline__trailing")
+    applyAttrs(attrs)
+  }, content = content)
+}
@@ -0,0 +1,13 @@
+@file:JsModule("@material/notched-outline")
+
+package dev.petuska.kmdc.notched.outline
+
+import dev.petuska.kmdc.core.MDCComponent
+import dev.petuska.kmdc.core.MDCExternalAPI
+import org.w3c.dom.Element
+
+@MDCExternalAPI
+public external class MDCNotchedOutline(element: Element) : MDCComponent<dynamic> {
+  public fun closeNotch()
+  public fun notch(notchWidth: Number)
+}
@@ -6,7 +6,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import dev.petuska.katalog.runtime.Showcase
 import dev.petuska.katalog.runtime.layout.InteractiveShowcase
-import dev.petuska.kmdc.button.MDCFloatingLabel
+import dev.petuska.kmdc.floating.label.MDCFloatingLabel
 import sandbox.control.BooleanControl
 import sandbox.control.TextControl
 

@@ -0,0 +1,66 @@
+package showcases
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import dev.petuska.katalog.runtime.Showcase
+import dev.petuska.katalog.runtime.layout.InteractiveShowcase
+import dev.petuska.kmdc.floating.label.MDCFloatingLabel
+import dev.petuska.kmdc.notched.outline.Leading
+import dev.petuska.kmdc.notched.outline.MDCNotchedOutline
+import dev.petuska.kmdc.notched.outline.Notch
+import dev.petuska.kmdc.notched.outline.Trailing
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Div
+    import sandbox.control.BooleanControl
+import sandbox.control.TextControl
+
+private class MDCNotchedOutlineVM {
+  var notched by mutableStateOf(false)
+  var noLabel by mutableStateOf(false)
+  var label by mutableStateOf("My Label")
+}
+
+@Composable
+@Showcase(id = "MDCNotchedOutline")
+fun MDCNotchedOutline() = InteractiveShowcase(
+  viewModel = { MDCNotchedOutlineVM() },
+  controls = {
+    BooleanControl("Notched", ::notched)
+    BooleanControl("No Label", ::noLabel)
+    TextControl("Label", ::label)
+  },
+) {
+  Div(attrs = {
+    style {
+      height(43.px)
+    }
+  }) {
+    MDCNotchedOutline(
+      noLabel = noLabel,
+      notched = notched,
+      attrs = {
+        style {
+          width(200.px)
+        }
+      }
+    ) {
+      Leading()
+      Notch {
+        MDCFloatingLabel(
+          text = label,
+          float = notched,
+          id = "kmdc-notched-outline-label",
+          attrs = {
+            style {
+              marginTop(0.75.em)
+              paddingLeft(0.5.em)
+            }
+          }
+        )
+      }
+      Trailing()
+    }
+  }
+}